<?php	
$template['title']='会员中心';
include 'inc/userHead_inc.php';
?>
	<div class="info">
		<div class="alert alert-success">
			<button class="close" type="button"> <span>&times;</span> </button>
			<form action="uploads.php" method="post" enctype="multipart/form-data">
				<input type="file" name="myfile" />
				<input type="submit" name="submit" class="btn btn-info" value="开始上传" />
			</form>
		</div>
		<?php
			if(isset($_POST['submit'])){
				//更新用户信息
				//转义字符
				$_POST=escape($link,$_POST);
				$query="update userinfo set email='{$_POST['email']}',phone={$_POST['phone']},sex='{$_POST['sex']}',QQ={$_POST['QQ']},birthday='{$_POST['birth']}',Realname='{$_POST['realname']}' where username='{$_COOKIE['youyou']['name']}'";
				$result=execute($link,$query);
				$data=mysqli_affected_rows($link);
				if($data){
					skip('information.php', 'ok', '恭喜您！修改成功！');
				}else{
					skip('information.php', 'error', '对不起，修改失败，请稍后再试！');
				}
			}

			$query="select * from userinfo where username='".$_COOKIE['youyou']['name']."'";
			$result=execute($link,$query);
			echo "<form action='' onsubmit='return checkUserName()' method='post' name='form'>";
			while($data=mysqli_fetch_row($result)){
				//输入数据库里存储的信息

				echo "<div class='title'>个人资料<div class='headImg2' title='点击我上传头像'><img src='{$data[12]}' alt='点击我上传头像' /></div></div>
					  <div class='form-group'><span class='name'><em>*</em>真实姓名：</span><input type='text' name='realname' class='form-control' value='".$data[9]."' /> <div class='pormpt2'><em></em><p class='alert'>请输入真实姓名</p></div></div>
					  <div class='form-group'><span class='name'><em>*</em>用户名：</span><input type='text' disabled='disabled' class='form-control' value='".$data[1]."' /> <div class='pormpt2'><em></em><p class='alert'>6-12位，字母、数字、下划线</p></div> </div>
					  <div class='form-group'><span class='name'><em>*</em>电子邮件：</span> </span><input type='email' name='email' class='form-control ' value='".$data[4]."' /> <div class='pormpt2'><em></em><p class='alert'>请输入合法的电子邮件</p></div> </div>
					  <div class='form-group'><span class='name'><em>*</em>手机号：</span><input type='text' name='phone'  class='form-control' value='".$data[5]."' /> <div class='pormpt2'><em></em><p class='alert'></p></div> </div>
					  <div class='form-group'><span class='name'><em>*</em>性别：</span><input type='radio' name='sex' value='男' checked='checked' />男 <input type='radio' name='sex' value='女' />女</div>
					  <div class='form-group'><span class='name'><em>*</em>QQ：</span><input type='text' name='QQ' class='form-control' value='".$data[7]."' /> <div class='pormpt2'><em></em><p class='alert'>请输入合法的QQ</p></div> </div>
					  <div class='form-group'><span class='name'><em>*</em>出生年月：</span><input type='date' name='birth' class='form-control' value='".$data[8]."' /> </div>
					  <div class='promise'>悠游网郑重承诺：<br />
					  我们将尊重您的个人隐私，您的个人信息不会被公开。<br />
					  我们会为您量身定制个性化服务，让您享受更优质的出行体验。</div>
					  ";
			}
			echo "<input type='submit' class='btn sub' name='submit' value='保存' />";
			echo "</form>";


		?>
	</div>
</div>

<?php
	include 'inc/footer_inc.php';
?>
<script type="text/javascript">

	var email=document.form.email;
	var phone=document.form.phone;
	var QQ=document.form.QQ;

	var oformGroup=document.getElementsByClassName('form-group');
	var Ioco1=document.getElementsByClassName('pormpt2')[2].getElementsByTagName('em')[0];
	var oInfo1=document.getElementsByClassName('pormpt2')[2].getElementsByTagName('p')[0];
	var Ioco2=document.getElementsByClassName('pormpt2')[3].getElementsByTagName('em')[0];
	var oInfo2=document.getElementsByClassName('pormpt2')[3].getElementsByTagName('p')[0];
	var Ioco3=document.getElementsByClassName('pormpt2')[4].getElementsByTagName('em')[0];
	var oInfo3=document.getElementsByClassName('pormpt2')[4].getElementsByTagName('p')[0];

	var re=/^\w+@[a-z 0-9]+\.[a-z]{2,4}$/;

	email.onblur=function(){
		checkEmail();
	}

	phone.onblur=function(){
		checkPhone();
	}

	QQ.onblur=function(){
		checkQQ();
	}

	function checkEmail(){
		if(re.test(email.value)== false){
			oformGroup[2].classList.add('has-error');
			Ioco1.classList.add('warning');
			oInfo1.classList.add('alert-warning');
			oInfo1.innerHTML="请输入合法的电子邮件!";
			return false;
		}else{
			oformGroup[2].classList.remove('has-error');
			oformGroup[2].classList.add('has-success');
			Ioco1.classList.remove('warning');
			oInfo1.classList.remove('alert-warning');
			Ioco1.classList.add('success');
			oInfo1.innerHTML="";
		}
		return true;
	}

	function checkPhone(){
		if(phone.value==""){
			oInfo2.classList.add('alert-warning');
			Ioco2.classList.add('warning');
			oInfo2.innerHTML="手机号不能为空!";
			oformGroup[3].classList.add('has-error');
			return false;
		}else if(isNaN(phone.value)){
			oInfo2.innerHTML="请输入数字类型!";
			oInfo2.classList.add('alert-warning');
			Ioco2.classList.add('warning');
			oformGroup[3].classList.add('has-error');
			return false;
		}else{
			oInfo2.classList.remove('alert-warning');
			Ioco2.classList.remove('warning');
			Ioco2.classList.add('success');
			oInfo2.innerHTML="";
			oformGroup[3].classList.remove('has-error');
			oformGroup[3].classList.add('has-success');
		}
		return true;
	}

	function checkQQ(){
		if(QQ.value==""){
			oInfo3.classList.add('alert-warning');
			Ioco3.classList.add('warning');
			oInfo3.innerHTML="QQ不能为空!";
			oformGroup[4].classList.add('has-error');
			return false;
		}else if(isNaN(QQ.value)){
			oInfo3.innerHTML="请输入数字类型!";
			oInfo3.classList.add('alert-warning');
			Ioco3.classList.add('warning');
			oformGroup[4].classList.add('has-error');
			return false;
		}else{
			oInfo3.classList.remove('alert-warning');
			Ioco3.classList.remove('warning');
			Ioco3.classList.add('success');
			oInfo3.innerHTML="";
			oformGroup[4].classList.remove('has-error');
			oformGroup[4].classList.add('has-success');
		}
		return true;
	}

	function checkUserName(){

		if(checkEmail() && checkUser() && checkPhone() && checkQQ()){
			return true;
		}else{
			return false;
		}

	}

	var headImg2=document.getElementsByClassName('headImg2')[0];
	var close=document.getElementsByClassName('close')[0];
	var update=document.getElementsByClassName('alert-success')[0];
	close.onclick=function(){
		update.style.display="none";
	}
	headImg2.onclick=function(){

		update.style.display="block";

	}

</script>